<template>
  <div class="app-container jklis">
    <div class="zdy-main">
      <!-- <el-tabs
        type="border-card"
        v-model="actived"
        @tab-click="tabChange"
        v-loading="loading"
      > -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
        @keyup.enter.native="search"
      >
        <el-form-item label="手机号" prop="tel">
          <el-input
            v-model="queryParams.tel"
            placeholder="请输入手机号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="编号" prop="num">
          <el-input
            v-model="queryParams.num"
            placeholder="请输入编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="游戏类型">
          <el-select
            v-model="queryParams.gameType"
            placeholder="请选择游戏类型"
          >
            <el-option
              v-for="item in gameType"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="网易使用状态">
          <el-select
            v-model="queryParams.wyStatus"
            placeholder="请选择网易使用状态"
          >
            <el-option
              v-for="dict in gameStatus"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="下次换绑时间" prop="price" class="mm-b-8">
          <div class="two-input-content">
            <el-date-picker
              v-model="saleTimeArr"
              size="small"
              format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="发布人" prop="">
          <el-input
            v-model="queryParams.createName"
            placeholder="请输入发布人"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search"
            class="zdy-btn"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-refresh"
            type="primary"
            size="mini"
            plain
            @click="resetQuery"
            class="zdy-btn zdy-btn-refresh"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="openAdd"
            class="zdy-btn"
            >新增</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <el-tab-pane
          :label="tab"
          :name="tab"
          v-for="tab in gameTypes"
          :key="tab"
        > -->
      <el-table
        :data="tableData.records"
        @cell-dblclick="showImage"
        height="calc(100vh - 310px)"
        style="width: 100%"
        :border="true"
      >
        <!-- <el-table-column prop="id" label="序号" width="80"></el-table-column> -->
        <el-table-column
          prop="id"
          label="编号"
          width="88"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="88"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="260"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.remark"
              placement="top-start"
            >
              <div class="zdy-des">{{ scope.row.remark }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="createName"
          label="发布人"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gameType"
          label="游戏类型"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="手机编号"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="手机号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="tengxunCount"
          label="腾讯剩余卡位"
          width="126"
        >
          <template #default="{ row }">
            <div style="color: #1890ff" v-if="row.gameType == '腾讯'">
              {{ row.tengxunCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="custodian"
          align="center"
          label="网易使用状态"
          width="100"
        >
          <template #default="{ row }">
            <div style="color: green" v-if="row.wyStatus == 1">未使用</div>
            <div style="color: blue" v-if="row.wyStatus == 2">已空闲</div>
            <div style="color: red" v-if="row.wyStatus == 3">使用中</div>
            <div style="color: orange" v-if="row.wyStatus == 4">已售未换绑</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wyGoodsId"
          label="商品编号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplyChannel"
          label="出售渠道"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nextTime"
          label="下次换绑时间"
          width="188"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="custodian"
          label="保管人"
          width="100"
          align="center"
        ></el-table-column>

        <!-- <el-table-column
              align="center"
              label="腾讯系列"
              width="126"
              prop="txCount"
            >
              <template #default="{ row }">
                <div
                  style="color: #169bd5"
                  @click="tanchuangceng(row.tengxunContent, '腾讯系列')"
                >
                  {{ row.tengxunCount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="网易系列"
              prop="mhyCount"
              width="126"
            >
              <template #default="{ row }">
                <div
                  style="color: #169bd5"
                  @click="tanchuangceng(row.wangyiContent, '网易系列')"
                >
                  {{ row.wangyiCount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="米哈游系列"
              prop="mhyCount"
              width="126"
            >
              <template #default="{ row }">
                <div
                  style="color: #169bd5"
                  @click="tanchuangceng(row.mihaContent, '米哈游系列')"
                >
                  {{ row.mihaCount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="其他系列"
              prop="qtCount"
              width="126"
            >
              <template #default="{ row }">
                <div
                  style="color: #169bd5"
                  @click="tanchuangceng(row.otherContent, '其他系列')"
                >
                  {{ row.otherCount }}
                </div>
              </template>
            </el-table-column> -->
        <!-- <el-table-column prop="gameStr" label="绑定游戏" min-width="150">
              <template slot-scope="scope">
                <div class="zdy-des">{{ scope.row.gameStr }}</div>
              </template>
            </el-table-column> -->
        <!-- <el-table-column prop="remark" label="备注" min-width="260">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.remark"
              placement="top-start"
            >
              <div class="zdy-des">{{ scope.row.remark }}</div>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="remark"
          align="center"
          fixed="right"
          label="是否启用"
          width="100"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="statusChange($event, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="price" label="绑定游戏" width="100" sort-by sortable="custom"></el-table-column> -->
        <!-- <el-table-column prop="price" label="绑定游戏类型" width="100" sort-by sortable="custom"></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="168">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="delfn(scope.row)"
              size="mini"
              style="color: red"
              >删除</el-button
            >

            <!-- <el-button
              type="text"
              size="mini"
              @click="isUse(scope.row)"
              v-if="isUsePrew"
              >确认使用</el-button
            > -->

            <el-button
              type="text"
              v-if="scope.row.gameType == '网易' && scope.row.wyStatus == 2"
              @click="zhuanweishiyong(scope.row)"
              size="mini"
              style="color: red"
              >转未使用</el-button
            >
            <!-- <el-button
                  ref="copyBtn1"
                  type="text"
                  size="mini"
                  v-clipboard:copy="copyVlaue"
                  v-clipboard:error="onError"
                  v-clipboard:success="onCopy"
                  @click="keyCopy(scope.row)"
                >复制</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-tab-pane>
      </el-tabs> -->
    </div>
    <div class="pages-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.total"
      ></el-pagination>
    </div>
    <addDialog ref="addDialog"></addDialog>
    <!-- 系列弹窗 -->
    <el-dialog
      class="diologs"
      append-to-body
      :title="names"
      :visible.sync="dialogVisiblese"
      width="30%"
      center
      top="30vh"
    >
      <div
        style="
          height: 600px;
          display: flex;
          justify-content: start;
          overflow: auto;
        "
      >
        <div class="boxs">
          <div
            class="ones"
            v-for="(item, index) in xilie"
            :key="index"
            @click="getOnes(item.list, item.name)"
          >
            <div>{{ item.name }}({{ item.list.length }}个)</div>
          </div>
        </div>
        <div class="two" style="">
          <div class="twos" style="color: #1abc9c">
            {{ nameyouxi + " - 账号信息" }}
          </div>
          <div class="twos" v-for="(item1, index1) in listOne" :key="index1">
            {{ item1 }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="确认使用"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="使用类型">
          <el-select
            v-model="formData.useType"
            placeholder="请选择"
            @change="selectType"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="绑定QQ" v-if="showQQ">
          <el-input v-model="formData.bindAccount"></el-input>
        </el-form-item>
        <el-form-item label="使用失效">
          <el-select v-model="formData.useTime" placeholder="请选择">
            <el-option
              v-for="item in timeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          天
        </el-form-item>
        <el-form-item label="频繁截图" v-if="showJietu">
          <el-upload
            class="avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="useImg" :src="useImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="formData.useRemark"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTel()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addDialog from "./components/add";
import phoneApi from "../../api/phoneManage";
import moment from "moment";
export default {
  name: "phoneManage",
  components: { addDialog },
  data() {
    return {
      uploadImgUrl: "",
      dialogVisible: false,
      saleTimeArr: [],
      useImg: '',
      srcList: [],
      isUsePrew: true,
      toUsePrew: false,
      showQQ: false,
      showJietu: false,
      formData: {},
      typeList: [
        {
          value: "1",
          label: "已使用",
        },
        {
          value: "2",
          label: "已频繁",
        },
      ],
      timeList: [
        {
          value: "7",
          label: "7",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "30",
          label: "30",
        },
      ],
      formData: {},
      isUsePrew: true,
      gameTypes: ["手机", "手机卡"],
      tableData: {
        records: [],
        total: 0,
      },
      actived: "手机",
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wyStatus: null,
        gameType: null,
        startTime: null,
        endTime: null,
        createName: null,
      },
      dialogVisiblese: false,
      listOne: [],
      nameyouxi: "",
      names: "",
      xilie: [],
      gameType: [
        { name: "腾讯", id: 1 },
        { name: "网易", id: 2 },
        { name: "米哈游", id: 3 },
        { name: "其他", id: 4 },
      ],
      gameStatus: [
        { name: "未使用", id: 1 },
        { name: "已空闲", id: 2 },
        { name: "使用中", id: 3 },
        { name: "已售未换绑", id: 4 },
      ],
      exportLoading: false,
      saleTimeArr: [],
    };
  },
  created() {
    // this.getGames();
    // this.getHost();
    this.getList();
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  activated() {},
  methods: {
    updateTel() {
      this.formData.id = this.telId;
      this.formData.isUse = 1;
      this.formData.useImg = this.useImg
      phoneApi.userStatus(this.formData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$modal.msgSuccess("操作成功");
          this.getList();
          this.dialogVisible = false;
        }
      });
    },
    selectType() {
      if (this.formData.useType == 1) {
        this.showQQ = true;
        this.showJietu = false;
      }
      if (this.formData.useType == 2) {
        this.showQQ = false;
        this.showJietu = true;
      }
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.useImg = res.data.filePath;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    handleClose() {
      this.dialogVisible = false;
    },
    isUse(row) {
      this.formData = {};
      this.telId = row.id;
      console.log(this.telId);
      this.dialogVisible = true;
    },
    // 导出列表
    handleExport() {
      this.exportLoading = true;
      phoneApi.daochuPhone(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.$download.name(res.msg);
          this.$message.success("操作成功");
          this.exportLoading = false;
        }
      });
    },
    //转未使用
    zhuanweishiyong(item) {
      this.$confirm("此操作将该手机卡状态改为未使用状态,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let obj = {
            id: item.id,
            wyStatus: 1,
          };
          const res = await phoneApi.editListPhone(obj);
          console.log(res);
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 获取列表
    getList() {
      this.loading = true;
      if (this.saleTimeArr.length > 1) {
        var startDate = moment(this.saleTimeArr[0]).format("YYYY-MM-DD");
        this.queryParams.startTime = startDate + " 00:00:00";
        var endDate = moment(this.saleTimeArr[1]).format("YYYY-MM-DD");
        this.queryParams.endTime = endDate + " 23:59:59";
      }
      // this.queryParams.type = this.actived;
      this.queryParams.isUse = 0
      phoneApi.getList(this.queryParams).then((response) => {
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
        if (response.rows && response.rows.length) {
          this.rise = response.rows[0].rise;
        }
      });
    },

    // tabs切换时触发
    // tabChange() {
    //   this.queryParams.type = this.actived;
    //   this.getList();
    //   // this.getAreas();
    // },
    getOnes(list, i) {
      console.log(list, i);
      this.listOne = list;
      this.nameyouxi = i;
    },
    //系列弹层
    tanchuangceng(row, i) {
      console.log(111);
      if (row.length == 0) {
        this.dialogVisiblese = false;
        this.$message({
          message: "暂无系列！",
          type: "warning",
        });
        return;
      }
      this.dialogVisiblese = true;
      console.log(row);
      this.xilie = row;
      this.names = i;
      this.listOne = row[0].list;
      this.nameyouxi = row[0].name;
    },

    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 状态改变
    statusChange(e, row) {
      phoneApi.editPhone(row).then((res) => {
        console.log("%c Line:194 🌰 res", "color:#3f7cff", res);
        this.$message.success("操作成功！");
        this.getList();
      });
    },
    // 打开新增弹窗
    openAdd() {
      this.$refs.addDialog.open();
    },
    // 打开编辑弹窗
    editRow(row) {
      this.$refs.addDialog.open("edit", row);
    },
    // 复制商品信息
    keyCopy(item) {
      var hoste = this.hoste.replace("xh.", "");
      hoste = hoste.replace("www.", "");
      hoste = hoste.replace("//", "//rt.");
      hoste = hoste.replace("/show.html?ZHID=", "");
      hoste = hoste + "/show.html?id=" + this.user.userId;

      let hostt = hoste + "&ZHID=" + item.id;
      this.copyVlaue =
        "商品ID：" +
        item.id +
        "\n" +
        "自编号：" +
        item.gameName +
        "\n" +
        "大区：" +
        item.regional +
        "\n" +
        "段位：" +
        item.level +
        "\n" +
        "英雄：" +
        item.heroes +
        "\n" +
        "皮肤：" +
        item.skins +
        "\n" +
        "售价：" +
        item.newPrice +
        "\n" +
        "简介：" +
        item.des +
        "\n" +
        "商品截图：" +
        hostt;
    },
    // 复制成功和失败的方法
    onCopy(e) {
      this.$modal.msgSuccess("复制成功");
      this.copyVlaue = "";
    },
    onError() {
      this.$modal.msgError("复制失败");
      this.copyVlaue = "";
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        wyStatus: null,
        gameType: null,
        startTime: null,
        endTime: null,
        createName: null,
      };
      this.saleTimeArr = [];
      this.getList();
    },

    // 提号
    openPickUp(row) {
      this.$refs.pickDialog.open(row);
    },
    // 双击行查看详情图片
    showImage(row) {
      // var hoste = this.hoste.replace("xh.", "");
      // hoste = hoste.replace("www.", "");
      // hoste = hoste.replace("//", "//rt.");
      // hoste = hoste.replace("/show.html?ZHID=", "");
      // hoste = hoste + "/show.html?id=" + this.user.userId;
      // let hostt = hoste + "&ZHID=" + row.id;
      // this.$refs.h5Dialog.open(hostt);
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    //删除
    delfn(item) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await phoneApi.delPhone(item.id);
          console.log(res);
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.ones {
  width: 166px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  border: 1px solid #ccc;
}

.two {
  text-align: center;
  width: 300px;
}

.twos {
  width: 100%;
  padding: 11.7px 20px;
  border: 1px solid #ccc;
}
.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 6px 0;
}
.search-form-new ::v-deep .el-input {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
